<template>
  <div class="user">
    <div class="head-bg-block">
      <img class="head-bg-img" src="https://mgil.oss-cn-hangzhou.aliyuncs.com/base/userinfo-bg.jpg">
      <div class="head-block">
        <img class="avatar-img" src="../assets/logo.png">
        <span class="name-span">木易</span>
        <div class="info-range-block">
          <div class="info-block">
            <div class="info-details-block" style="width: 35%">
              <span class="info-content-span">15659734990</span>
              <span class="info-title-span">姓名</span>
            </div>
            <div class="info-details-block" style="width: 24%; margin-left: 3%">
              <span class="info-content-span" style="padding-top: 15%"><img src="../assets/man.png"></span>
              <span class="info-title-span">性别</span>
            </div>
            <div class="info-details-block" style="width: 35%; margin-left: 3%">
              <span class="info-content-span"><b>9999</b></span>
              <span class="info-title-span">余额</span>
              <button>+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tab>
      <tab-item selected @on-item-click="selectTab = 0">收藏</tab-item>
      <tab-item @on-item-click="selectTab = 1">预约</tab-item>
      <tab-item @on-item-click="selectTab = 2">订单</tab-item>
    </tab>
    <CollectTab class="tab-item-block" v-show="selectTab === 0"></CollectTab>
    <SubscribeTab class="tab-item-block" v-show="selectTab === 1"></SubscribeTab>
    <OrderTab class="tab-item-block" v-show="selectTab === 2"></OrderTab>
  </div>
</template>

<script>
import { Tab, TabItem } from 'vux'
import CollectTab from './public/collectTab'
import SubscribeTab from './public/subscribeTab'
import OrderTab from './public/orderTab'

export default {
  components: {
    Tab,
    TabItem,
    CollectTab,
    SubscribeTab,
    OrderTab
  },
  data () {
    return {
      selectTab: 0,
      sampleList: [
        {
          id: 1,
          mainImage: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/sample/006799699800-844590-s5.jpg'
        }, {
          id: 2,
          mainImage: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/sample/1-754750-s5.jpg'
        }
      ],
      productFmt: [
        [{
          id: 1,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/213177291fb943d7b113f1ee41c38ac8.jpg',
          name: '往后余生',
          price: 10000
        }, {
          id: 2,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/347f095fc0ee456fa8f9767d4b17aeca.jpg',
          name: '风雪是你',
          price: 10000
        }], [{
          id: 3,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/378f98e2a3fe480996804cc91b8edb3a.jpg',
          name: '平淡是你',
          price: 20000
        }, {
          id: 4,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/39badb31391643b5bcb90adee45c9922.jpg',
          name: '清贫也是你',
          price: 30000
        }]
      ]
    }
  }
}
</script>

<style lang="less">
.user {
  padding-bottom: 60px;
  .head-bg-block {
    position: relative;
    height: 75vw;
    width: 100vw;
    .head-bg-img {
      width: 100%;
      height: 100%;
      opacity: .2;
    }
    .head-block {
      position: absolute;
      top: 0;
      height: 80vw;
      width: 100vw;
      .avatar-img {
        background: #fff;
        display: block;
        width: 28vw;
        height: 28vw;
        margin: 25px auto 0 auto;
        border-radius: 50%;
        box-shadow: 0 10px 15px @shadow-color;
      }
      .name-span {
        display: inline-block;
        text-align: center;
        margin: 20px auto 10px auto;
        width: 100%;
        font-weight: bold;
        font-size: 18px;
      }
      .info-range-block {
        height: 70px;
        .info-block {
          height: 70px;
          width: 90vw;
          margin: 0 auto;
          .info-details-block {
            position: relative;
            float: left;
            background: #fff;
            border-radius: 5px;
            height: 100%;
            box-shadow: 0 5px 15px @shadow-color;
            text-align: center;
            font-size: 13px;
            button {
              position: absolute;
              right: -10px;
              bottom: 5px;
              border: none;
              border-radius: 5px;
              background: @theme-color;
              box-shadow: 0 5px 15px @theme-shadow-color;
              height: 25px;
              width: 25px;
              color: #fff;
              font-size: 18px;
              font-weight: bold;
            }
            .info-content-span {
              display: block;
              height: 40%;
              padding-top: 10%;
              color: @font-color;
              img {
                height: 70%;
              }
              b {
                color: @btn-color;
                font-size: 15px;
              }
            }
            .info-title-span {
              display: block;
              height: 50%;
              font-size: 14px;
              color: @font-vice-color;
            }
          }
        }
      }
    }
  }
  .tab-item-block {
    width: 100%;
    text-align: center;
    padding: 10px 0 0 0;
    .collect-active {
      border: 1px solid @theme-color;
      color: @theme-color;
    }
    .sample-item-block {
    }
    .product-item-block {
    }
  }
}
</style>
